<template>
  <div style="margin-left: 5px">
    <el-space direction="vertical" alignment="left" style="width: 100%">
      <div v-if="listData.length === 0" class="empty-collections">
        <el-empty description="您还没有收藏任何商品" />
        <el-button type="primary" @click="goToProducts">去逛逛</el-button>
      </div>
      
      <el-row v-else :gutter="20">
        <el-col :span="6" v-for="(item, index) in listData" :key="item.id">
          <el-card shadow="hover" :style="index > 3 ? { marginTop: '10px', cursor: 'pointer' } : 'cursor: pointer'">
            <div class="card-content" @click="viewProductDetails(item.pid)">
              <el-row :gutter="20">
                <el-col :span="12">
                  <el-image 
                    style="width: 100%; height: calc(0.69 * 10vw);" 
                    fit="cover"
                    :src="item.img"
                    :preview-src-list="[item.img]"
                  />
                </el-col>
                <el-col :span="12">
                  <el-space direction="vertical">
                    <el-text size="default" tag="b" line-clamp="4">
                      {{ item.name }}
                    </el-text>
                    <el-button :icon="Delete" type="danger" @click.stop="deleteOne(null, item)">取消收藏</el-button>
                  </el-space>
                </el-col>
              </el-row>
            </div>
          </el-card>
        </el-col>
      </el-row>
      
      <el-pagination
          @current-change="currentChange"
          @size-change="sizeChange"
          :page-size="pageInfo.pageSize"
          :current-page="pageInfo.pageNum"
          background
          layout="total,sizes, prev, pager, next"
          :total="pageInfo.total">
      </el-pagination>
    </el-space>
  </div>
</template>

<script setup>
import request from "@/utils/http.js";
import {Check, Close, Delete, Edit, Refresh, Plus, Search} from '@element-plus/icons-vue'
import {ref, toRaw, onMounted} from "vue";
import {ElMessage, ElMessageBox} from "element-plus";
import {useRouter} from 'vue-router';

const router = useRouter();
const listData = ref([]);
const pageInfo = ref({
  //当前页
  pageNum: 1,
  //分页大小
  pageSize: 10,
  //总条数
  total: 0
});

onMounted(() => {
  getPageList();
});

/**
 * 获取分页数据
 */
function getPageList() {
  request.get("/api/productCollect/page", {
    params: pageInfo.value
  }).then(res => {
    if (res.code === 1) {
      listData.value = res.data.list;
      pageInfo.value.total = res.data.total;
    } else {
      ElMessage.error(res.msg || "获取收藏列表失败");
      listData.value = [];
    }
  }).catch(error => {
    console.error("获取收藏列表失败:", error);
    ElMessage.error("获取收藏列表失败: " + error.message);
    listData.value = [];
  });
}

/**
 * 选择分页
 * @param e
 */
function currentChange(e) {
  pageInfo.value.pageNum = e
  getPageList()
}

/**
 * 改变分页数量
 * @param e
 */
function sizeChange(e) {
  pageInfo.value.pageSize = e
  getPageList()
}

/**
 * 单个删除
 * @param index
 * @param row
 */
function deleteOne(index, row) {
  ElMessageBox.confirm('确定要取消收藏该商品吗?', '提示', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning'
  }).then(() => {
    batchDelete([row]);
  }).catch(() => {
    // 用户取消操作
  });
}

/**
 * 批量删除
 * @param rows
 */
function batchDelete(rows) {
  if (!rows || rows.length === 0) {
    return;
  }
  
  let ids = rows.map(item => item.id);
  
  request.delete("/api/productCollect/delBatch", {data: ids}).then(res => {
    if (res.code === 1) {
      ElMessage({
        message: "取消收藏成功",
        type: 'success'
      });
      getPageList();
    } else {
      ElMessage.error(res.msg || "取消收藏失败");
    }
  }).catch(error => {
    ElMessage.error("取消收藏失败: " + error.message);
  });
}

/**
 * 查看商品详情
 */
function viewProductDetails(productId) {
  router.push(`/productDetails/${productId}`);
}

/**
 * 去商品列表页面
 */
function goToProducts() {
  router.push('/productList');
}

</script>

<style scoped>
.empty-collections {
  width: 100%;
  text-align: center;
  padding: 50px 0;
}

.card-content {
  position: relative;
}

.el-card {
  transition: all 0.3s;
}

.el-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0,0,0,0.1);
}
</style>
